<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试轮播图</title>
    <style type="text/css">
        .container{
            height: 160px;
            position: relative;  /*相对的*/
            /*overflow: hidden;  !*滚动隐藏*!*/
            overflow-y: hidden;
            overflow-x: scroll;
        }

        .container .image-slider{
            display: flex;
            overflow-x:scroll;
            overflow-y: hidden;
            scroll-behavior: smooth;/*滑动动画*/
            -webkit-overflow-scrolling: touch;/*支持移动端触摸*/
            scroll-snap-type: x mandatory; /*强制在横轴上有吸附效果*/
        }

        .container img{
            width: 100%;
            height: 100%;
            object-fit: cover;/*按比例裁剪*/
            scroll-snap-align: start;/*吸附方式是start*/
        }

        .nav-section{
            position: absolute;
            bottom: 0;  /*相对于容器的底部*/
            width: 100%;
            opacity: 0.5;  /*透明度*/
            color: #fff;  /*字体颜色*/
            background-color: #000;
            display: flex; /*流式布局*/
            justify-content: flex-end;  /*小圆点整体在右边*/
            align-items: stretch;  /*撑起容器*/
        }

        /*.nav-section .slide-button代表  .nav-section下面的 .slide-button
        .nav-section slide-button代表 nav-section slide-button这两个在一起组成的同一个样式
        */
        .nav-section .slide-button{
            display: flex;
            width: 10px;
            height: 10px;
            background-color: #fff;
            text-decoration: none;
            border-radius: 50%;/*画圆*/
            margin: 5px;
        }

        .nav-section .slide-button{
            background-color: red;
        }

    </style>
</head>
<body>
<div class="container">
    <!--   #imageSlider 是对一个容器的标识，目的是为了在父容器里直接拿到这个容器以及里面的东西-->
    <div class="image-slider">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604822676309&di=972dc55aa5ff0ddeb810fe76496ffa11&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201508%2F18%2F20150818221207_T3Vda.png" alt="默认文字"/>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604822676308&di=bfa7dba7020d5b2f31cdf40cc31d6bb4&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201610%2F24%2F20161024144619_FLXfK.gif" alt="默认文字"/>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604822676307&di=19a3bf519233bbc34384bcfc7cafce35&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F20%2F20150920132047_tm24w.gif" alt="默认文字"/>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604822676307&di=1be67a4569eeb0701c38a8d148074cc7&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201205%2F24%2F20120524221026_zuGsh.gif" alt="默认文字"/>
    </div>
    <div class="nav-section">
      <span class="slide-button"></span>
    </div>
</div>
</body>
</html>